<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/icon-font.css"/><!--图标-->
    <link rel="stylesheet" href="../../plugin/mescroll/css/mescroll.min.css">

    <title>资讯专题</title>
    <style>
        /*************专题**开始**************/
        .info-topic-wrap {
            background: rgba(255, 255, 255, 1);
            padding: 0 0.32rem;
        }

        .info-topic-wrap div:last-child {
            margin-bottom: 0;
        }

        .info-topic-box {
            margin-bottom: .44rem;
            padding-bottom: .4rem;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0 0 .32rem 0 rgba(0, 0, 0, 0.1);
            border-radius: .08rem;
        }

        .info-topic-cover {
            width: 100%;
            height: 2.4rem;
            background: white;
            border-top-left-radius: .08rem;
            border-top-right-radius: .08rem;
        }

        .info-topic-cover img {
            width: inherit;
            height: inherit;
            border-top-left-radius: .08rem;
            border-top-right-radius: .08rem;
        }

        .info-topic-icon {
            width: .6rem;
            height: .34rem;
            /*line-height: .34rem;*/
            background: linear-gradient(90deg, rgba(87, 161, 255, 1) 0%, rgba(44, 104, 255, 1) 100%);
            border-radius: .06rem;
            color: rgba(255, 255, 255, 1);
            text-align: center;
            margin-right: .16rem;
        }

        .info-topic-count {
            height: .34rem;
            line-height: .34rem;
            color: rgba(34, 34, 34, 0.7);
        }

        .info-topic-name {
            color: rgba(34, 34, 34, 1);
            line-height: .44rem;
            padding: .24rem .28rem 0 .28rem;
        }

        .info-topic-item {
            padding: .1rem .28rem 0 .28rem;
        }

        .info-topic-desc {
            color: rgba(34, 34, 34, 0.7);
            line-height: .44rem;
            padding-top: .16rem;
        }

        .flash-detail-kx-icon {
            width: 1.5rem;
            height: 0.3rem;
        }

        /*************专题**结束**************/

        .mescroll-upwarp {
            min-height: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<div class="flex-column h-100-p">
    <!--状态栏-->
    <div class="placeholder-top">
        <!--状态栏-->
        <div class="bg-main status-bar pos-f"></div>
        <!--导航栏-->
        <div class="bg-main nav-bar pos-f flex-row justify-content-between c-white align-items-center">
            <div class="left-bar" onclick="clickBack()">
                <span class="iconfont iconfanhui1 fs16"></span>
            </div>
            <div class="center-bar fs16 ff500 line1">资讯专题</div>
            <div class="right-bar">
            </div>
        </div>
    </div>

    <div id="mescroll" class="mescroll flex-1">
        <div class="info-topic-wrap" id="infotopicwrap"></div>
    </div>
</div>
</body>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/api.js"></script>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/date.js"></script>
<script src="../../js/icon-font.js"></script><!--用于彩色字体图标-->
<script src="../../js/touchRefresh.js"></script>
<script src="../../js/template.js"></script>

<script src="../../plugin/mescroll/js/mescroll.min.js"></script>

<script>
  let meScroll, pm = {
    pageNum: 1,
    pageSize: 10
  }

  function initPage(params) {

    //状态栏自适应
    Utils.sbhAdaptive()

    //下拉刷新、滚动加载
    meScroll = Template.createMeScroll({
      id: 'mescroll', //区域ID
      pageNum: pm.pageNum,
      downCallback: downCallback, //下拉刷新入口
      upCallback: upCallback //滚动加载入口
    })
  }

  function reLoadPage(){
    downCallback()
  }

  function downCallback() {
    pm.pageNum = 1

    getTopicList()
  }

  function upCallback(page) {
    //pm.pageNum = page.num
    //pm.pageSize = page.size
    getTopicList()
  }

  function getTopicList() {
    Server.topicList.getTopicList({
      pageNum: pm.pageNum,
      pageSize: pm.pageSize
    }).then(function (data) {
      if (data.list !== null) {
        let htmlStr = ''
        $.each(data.list, function (i, item) {
          htmlStr += '   <div class="info-topic-box" onclick=\'goSpecilCouser("' + item.funcCode + '")\'>\n' +
            '            <div class="info-topic-cover">\n' +
            '                <img src="' + item.coverImgUrl + '" alt="">\n' +
            '            </div>\n' +
            '            <div class="info-topic-name ff500 fs15">' + item.funcName + '</div>\n' +
            '            <div class="flex-row info-topic-item">\n' +
            '                <div class="info-topic-icon ff400 fs10 flex-row align-items-center justify-content-center"><div>专题</div></div>\n' +
            '                <div class="info-topic-count ff400 fs12">共' + item.articleCnt + '篇文章</div>\n' +
            '            </div>\n' +
            '        </div>'

        })

        if (pm.pageNum === 1) {
          $('.info-topic-wrap').html(htmlStr)
        } else {
          $('.info-topic-wrap').append(htmlStr)
        }
        pm.pageNum ++

        meScroll.endSuccess(data.list.length, data.list.length === pm.pageSize)
      }
    }).catch((error) => {
      jsBridge.log(error)
      meScroll.endErr()
    })
  }

  // 跳转专题列表,带专题信息
  function goSpecilCouser(funcCode) {
    jsBridge.openWindow('html/info/topic-detail.html?funcCode=' + funcCode,{},{noBar: false})
  }

</script>
</html>
